<template>
  <view class="container">
		<nav-ber :title="'查看调研任务-医生'" :bgColor="'#f7f8ff'"></nav-ber>
		<view class="province">
			<uFrom ref="getFrom" :itemList="itemList" :itemKeys.sync="itemKeys" @setdata="setdataFun"></uFrom>
			<view class="">
				<view style="margin: 20rpx 0;">调研资料</view>
				<view class="researc_flex">
					<view class="button_bgcolor">
						问卷
					</view>
					<view style="color: lightskyblue;" @click="quertionFun">
						铝镁匹林片（2）医师调研问卷
					</view>
					<view class="button_bgcolor" style="background-color: cornflowerblue;">
						已完成
					</view>
				</view>
			</view>
			<view>
				<uFrom ref="getFrommin" :itemList="itemListMin" :itemKeys="itemKeysmin" @setAdders="setAddersFun"></uFrom>
				<view style="margin: 20rpx 0;">
					打卡图片：
				</view>
				<image v-if="urlImg" :src="urlImg" mode=""></image>
			</view>
			<view class="button_str" @click="confirm">
				保存
			</view>
		</view>
  </view>
</template>
<script>
	import { itemList } from './items.js'
	import { timed_task_type } from '@/api/task.js'
	import { getresearchById, setTaskResearch } from '@/api/mytaskManagement.js'
	// 打卡
	var QQMapWX = require('./qqmap-wx-jssdk.js')
	var qqmapsdk;
	qqmapsdk = new QQMapWX({
		key: 'RJQBZ-273WU-PDKV5-2SODC-3VB5S-CJFGL'
	});
	// 打卡
  export default {
    data() {
			return {
				show: true,
				keyword: '',
				ispro: '1',
				list: ['进行中', '已完成'],
				current: 0,
				itemList: itemList,
				itemKeys: {
					titles: '',
					sel: '',
					steawwer: '',
				},
				// 定位打卡
				latitudesNew: '',
				longitudesNew: '',
				urlImg: '',
				location: {},
				itemKeysmin: {
					address: '',
				},
				itemListMin: [
					{
						label: '打卡地址',
						model: 'address',
						required: false,
						message: '请选择打卡地址',
						type: 'address',
						// test: 'mobile'
						// maxlength: 10,
					},
				],
			}
    },
		onLoad(option) {
			this.getApplyByIdFun(option.id)
		},
		methods: {
			// 打卡
			setAddersFun() {
				let _this = this
				let random = [0.00123, 0.002, 0.00153, 0.00163, 0.00183, 0.00193, -0.00193, -0.00123, -0.002, -0.00153, -0.00163, -0.00183, -0.00193]
				this.latitudes = _this.location.lat+random[Math.floor(Math.random()*10+3)]
				this.longitudes = _this.location.lng+random[Math.floor(Math.random()*10+3)]
				// this.latitudes = _this.location.lat
				// this.longitudes = _this.location.lng
				uni.chooseLocation({
						type: 'gcj02',
						latitude: _this.latitudes,
						longitude: _this.longitudes,
						success: function(res) {
							// latitude: 23.12855
							// longitude: 113.26995000000001
							_this.latitudesNew = res.latitude
							_this.longitudesNew = res.longitude
							_this.itemKeysmin.address = res.address
							_this.urlImg = `https://apis.map.qq.com/ws/staticmap/v2/?center=${res.latitude},${res.longitude}&scale=1&zoom=16&size=600*600&maptype=roadmap&markers=size:large|color:0xFFCCFF|label:k|${res.latitude},${res.longitude}&key=RJQBZ-273WU-PDKV5-2SODC-3VB5S-CJFGL`
						}
					})
			},
			setdataFun(val) {
				// val.applyId = val.id
				// val.id = undefined
				// val.applyQty = (+val.applyQty)
				setTaskResearch(val).then((res) => {
					uni.showToast({
					  title: '新建成功',
					  icon: "none",
					  duration: 2000,
						success: () => {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1,
								})
							}, 500)
						}
					})
					
				})
			},
			getApplyByIdFun(id) {
				getresearchById(id).then((res) => {
					timed_task_type().then((item) => {
						this.itemKeys = {
							...res.data,
							typeName: item.data.filter(items => items.dictValue == res.data.type)[0].dictLabel,
						}
					})
				})
			},
			confirm() {
				this.$refs.getFrom.submit()
				// .then((res) => {
				// 	console.log(res)
				// })
			},
			proFun(val) {
				this.ispro = val
			},
			sectionChange(index) {
				this.current = index;
			},
			quertionFun() {
				uni.navigateTo({
					url: "/pages/mytaskManagement/questionPaperAnswers/index"
				})
			},
		},
		mounted() {},
  }
</script>
<style lang="scss" scoped>
	.sea_pad {
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.container {
		background-color: #f7f8ff;
		// background-color: #fff;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	.province {
		flex: 1;
		overflow: scroll;
		padding: 0 20rpx;
		margin-top: 20rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
	}
	.button_str {
		width: 80%;
		margin: auto;
		text-align: center;
		border-radius: 100rpx;
		padding: 20rpx 10rpx;
		background-color: rgb(3, 121, 255);
		color: #fff;
		box-sizing: border-box;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.researc_flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.button_bgcolor {
		background-color: orange;
		color: #fff;
		width: 100rpx;
		padding: 10rpx 0rpx;
		font-size: 26rpx;
		box-sizing: border-box;
		border-radius: 50rpx;
		text-align: center;
	}
</style>
